<template>
	<view class="drawbox flexcolumn" :style="'background-image: url(' + gginner_bg+ ')'">
		<view class="drawimg flexcenter">
			<image :src="`${imgPath}${drawitem.photo}`" alt=""></image>
		</view>
		<view class="ctitle f18 mt_24 textcenter">{{drawitem.level_name}}</view>
		<view class="f14 c_fff mt_10 textcenter" style="color:#555;margin-top:16rpx;">{{drawitem.draw_name}}</view>

		<view style="margin:20rpx auto;" class="flexcenter detailbtn mauto mt_60 c_fff f16" @click.stop="goDetail">
			查看奖品详情
		</view>
		<view class="flexbetween mt_60 ">
			<view class="flexcenter detailbtn detailbtn2 mauto c_fff f16" @click.stop="closePop">
				继续抽奖
			</view>
			<view class="flexcenter detailbtn detailbtn2 mauto c_fff f16 " @click.stop="closePop">
				返回首页
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgPath: uni.$http.baseUrl + "/",
				gginner_bg: `${uni.$http.baseUrl}/upload/we/common/gj_bg.png`,

			}
		},
		props: {
			drawitem: {
				default: null
			}
		},
		methods: {

			goDetail() {
				let task = JSON.parse(uni.getStorageSync('taskInfo', 'session')).task;
				let url = '/pagesPrize/aboutPrize/information?id=' + task.id + '&index=1'
				uni.navigateTo({
					url
				})
			},

			closePop() {
				this.$emit('close')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.drawbox {
		background-size: cover;
		width: 540rpx;
		padding: 40rpx;
		margin: auto;
		border-radius: 30rpx;

	}

	.drawimg {
		width: 80%;
		max-height: 680rpx;
		margin: auto;

		image {

			width: 400rpx;
			height: 300rpx;
			margin: auto;
		}

		// height: auto;
	}

	.ctitle {
		color: #76B9FE;
	}

	.detailbtn {
		width: 220rpx;
		height: 66rpx;
		border-radius: 80rpx;
		background: #418BF8;
		border: 1px solid #fff;
		font-size: 26rpx;
		// background-color: #76B9FE;
		// border: 1px solid #007CFF;
	}

	.detailbtn2 {
		width: 220rpx;
		height: 66rpx;
		font-size: 26rpx;
	}

	.mauto {
		margin: auto;
	}
</style>